<template>
	<el-input
		v-model.trim="inputVal"
		:class="classProp"
		type="primary"
		icon="el-icon-plus"
		:disabled="disabled"
		:validate-event="validateEvent"
		:placeholder="placeholder"
		:clearable="clearable"
		:size="size"
		@blur="onBlurEvent"
		@keyup.enter.native="onEnter"
		@change="onChangeEvent"
		@clear="onClear"
	>
		<el-button v-if="showSearch" slot="append" type="primary" icon="el-icon-search" @click="onSearch"></el-button>
	</el-input>
</template>
<script>

    export default {
        name: 'JkSearchInput',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            showSearch: { // 是否显示搜索图标
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: true
            },
            value: {
                type: [String, Number],
                default: ''
            },
            size: {
                type: String,
                default: 'small'
            },
            placeholder: {
                type: String,
                default: '请输入...'
            },
            validateEvent: {
                type: Boolean,
                default: true
            },
            classProp: {
                type: String,
                default: 'search-bar-input'
            }
        },
        data() {
            return {
                inputVal: ''
            };
        },
        watch: {
            value(newVal) {
                this.inputVal = newVal;
            }
        },
        mounted() {
            this.inputVal = this.value;
        },
        methods: {
            onClear() {
                this.$emit('clear', this.inputVal);
                this.$emit('change', this.inputVal);
            },
            onSearch() {
                this.$emit('on-enter', this.inputVal);
                this.$emit('on-search', this.inputVal);
            },
            onEnter() {
                this.$emit('on-enter', this.inputVal);
                this.$emit('on-search', this.inputVal);
            },
            onBlurEvent() {
                this.$emit('blur', this.inputVal);
            },
            onChangeEvent(val) {
                this.$emit('change', this.inputVal);
            }
        }

    };
</script>
